<template>
    <dv-full-screen-container>
      <div class="home">
        <dv-border-box-11 title="安徽监狱智能收押分流系统" :titleWidth="300" class="home-content">
            <div class="home-content-container">
            

              <!-- 主要内容区域 -->
              <div class="main-content">
                  <!-- 左侧实时分流动态 -->
                  <div class="left-panel">
                      <dv-border-box-1>
                          <realtime-flow :realtime-data="realtimeData"></realtime-flow>
                      </dv-border-box-1>
                  </div>

                  <!-- 右侧区域 -->
                  <div class="right-panel">
                    <dv-border-box-1>
                      <div class="right-panel-content">
                        <div class="right-top-panel">
                            <div class="right-top-panel-content-map">
                                <map-view :show-fly-lines="showFlyLines" ref="mapView"></map-view>
                            </div>
                            <div class="right-top-panel-content-logs">
                              <realtime-logs></realtime-logs>
                            </div>
                        </div>
                        <div class="right-bottom-panel">
                          <div class="bottom-chart-container">
                            <div class="bottom-chart-item">
                              <crime-prediction-chart></crime-prediction-chart>
                            </div>
                            <div class="bottom-chart-item">
                              <crime-warning-chart></crime-warning-chart>
                            </div>
                          </div>
                        </div>
                      </div>
                     
                    </dv-border-box-1>
                  </div>

              </div>

              <!-- 底部装饰 -->
              <!-- <div class="bottom-decoration">
                  <dv-decoration-2 style="width: 100%; height: 60px;" />
              </div> -->
            </div>
        </dv-border-box-11>
      </div>

      <!-- 浮动注销按钮 -->
      <div class="floating-logout">
        <button class="logout-btn" @click="handleLogout" title="注销">
          <!-- <i class="logout-icon">🚪</i> -->
          <span class="logout-text">注销</span>
        </button>
      </div>
    </dv-full-screen-container>
</template>

<script>
import RealtimeFlow from '@/components/RealtimeFlow.vue'
import MapView from '@/components/MapView.vue'
import RealtimeLogs from '@/components/RealtimeLogs.vue'
import CrimeHeatmap from '@/components/CrimeHeatmap.vue'
import CrimeGrowthChart from '@/components/CrimeGrowthChart.vue'
import PrisonerCompositionChart from '@/components/PrisonerCompositionChart.vue'
import CrimePredictionChart from '@/components/CrimePredictionChart.vue'
import CrimeWarningChart from '@/components/CrimeWarningChart.vue'

export default {
  name: 'Home',
  components: {
    RealtimeFlow,
    MapView,
    RealtimeLogs,
    CrimeHeatmap,
    CrimeGrowthChart,
    PrisonerCompositionChart,
    CrimePredictionChart,
    CrimeWarningChart
  },
  data() {
    return {
      showFlyLines: true,
      realtimeData: {
        onlineUsers: 12543,
        activeProjects: 89,
        dataFlow: '2.4GB/s',
        cpuUsage: 67
      },
      trendChartOption: {
        xAxis: {
          type: 'category',
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '数据趋势',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330],
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 6,
            lineStyle: {
              color: '#00ffff',
              width: 2
            },
            itemStyle: {
              color: '#00ffff'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(0, 255, 255, 0.3)' },
                  { offset: 1, color: 'rgba(0, 255, 255, 0.1)' }
                ]
              }
            }
          }
        ]
        
      },
      performanceConfig: {
        network: {
          data: [75],
          colors: ['#00ffff', '#ff0000'],
          fontSize: 16
        },
        memory: {
          data: [68],
          colors: ['#00ff88', '#ff0000'],
          fontSize: 16
        }
      }
    }
  },
  mounted() {
    // 使用$nextTick确保DOM完全渲染后再初始化
    this.$nextTick(() => {
      this.startDataUpdate()
      this.initFullscreenShortcuts()
    })
  },
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
    this.removeFullscreenShortcuts()
  },
  methods: {
    // 开始数据更新
    startDataUpdate() {
      this.updateTimer = setInterval(() => {
        this.updateRealtimeData()
        this.updateChartData()
      }, 3000)
    },

    // 更新实时数据
    updateRealtimeData() {
      this.realtimeData.onlineUsers += Math.floor(Math.random() * 100) - 50
      this.realtimeData.activeProjects += Math.floor(Math.random() * 10) - 5
      this.realtimeData.cpuUsage = Math.max(10, Math.min(95, this.realtimeData.cpuUsage + Math.floor(Math.random() * 10) - 5))

      // 确保数据在合理范围内
      this.realtimeData.onlineUsers = Math.max(10000, Math.min(20000, this.realtimeData.onlineUsers))
      this.realtimeData.activeProjects = Math.max(50, Math.min(150, this.realtimeData.activeProjects))
    },

    // 更新图表数据
    updateChartData() {
      try {
        // 确保趋势图数据结构存在
        if (this.trendChartOption && this.trendChartOption.series && this.trendChartOption.series[0] && this.trendChartOption.series[0].data) {
          // 更新趋势图数据
          const newData = this.trendChartOption.series[0].data.map(() =>
            Math.floor(Math.random() * 400) + 600
          )
          // 使用Vue.set确保响应式更新
          this.$set(this.trendChartOption.series[0], 'data', newData)
        }

        // 更新性能数据
        if (this.performanceConfig.network && this.performanceConfig.network.data) {
          this.$set(this.performanceConfig.network, 'data', [Math.floor(Math.random() * 30) + 60])
        }
        if (this.performanceConfig.memory && this.performanceConfig.memory.data) {
          this.$set(this.performanceConfig.memory, 'data', [Math.floor(Math.random() * 40) + 40])
        }
      } catch (error) {
        console.error('更新图表数据时出错:', error)
      }
    },

    // 初始化全屏快捷键
    initFullscreenShortcuts() {
      this.fullscreenKeyHandler = (event) => {
        // F11 键全屏
        if (event.key === 'F11') {
          event.preventDefault()
          this.toggleFullscreen()
          return
        }

        // Ctrl+Enter 或 Cmd+Enter 全屏
        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
          event.preventDefault()
          this.toggleFullscreen()
          return
        }

        // Escape 键退出全屏
        if (event.key === 'Escape' && this.isFullscreen()) {
          this.exitFullscreen()
          return
        }
      }

      document.addEventListener('keydown', this.fullscreenKeyHandler)
    },

    // 移除全屏快捷键监听器
    removeFullscreenShortcuts() {
      if (this.fullscreenKeyHandler) {
        document.removeEventListener('keydown', this.fullscreenKeyHandler)
      }
    },

    // 切换全屏状态
    toggleFullscreen() {
      if (this.isFullscreen()) {
        this.exitFullscreen()
      } else {
        this.enterFullscreen()
      }
    },

    // 进入全屏
    enterFullscreen() {
      const element = document.documentElement

      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }

      // 全屏状态变化后重置视图
      setTimeout(() => {
        if (this.$refs.mapView) {
          this.$refs.mapView.resetMap()
        }
      }, 100)
    },

    // 退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }

      // 全屏状态变化后重置视图
      setTimeout(() => {
        if (this.$refs.mapView) {
          this.$refs.mapView.resetMap()
        }
      }, 100)
    },

    // 检查是否处于全屏状态
    isFullscreen() {
      return !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
      )
    },

    // 处理注销
    handleLogout() {
      // 清除定时器
      if (this.updateTimer) {
        clearInterval(this.updateTimer)
      }

      // 调用store的logout action
      this.$store.dispatch('user/logout')

      // 跳转到登录页面
      this.$router.push('/login')

      // 显示提示消息
      this.$message.success('已成功注销')
    }

  }
}
</script>

<style scoped>
.home {
  height: 100vh;

  color: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* 藏青蓝色主题背景系统 */
  background:
    /* 动态网格背景 */
    linear-gradient(rgba(0, 100, 150, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 100, 150, 0.05) 1px, transparent 1px),
    /* 统一藏青蓝色径向渐变 */
    radial-gradient(ellipse at 20% 20%, rgba(0, 80, 120, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 60, 100, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 40% 60%, rgba(0, 100, 140, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 60% 30%, rgba(0, 70, 110, 0.08) 0%, transparent 50%),
    /* 藏青蓝色渐变背景 */
    linear-gradient(135deg, #0a0a1a 0%, #0f1419 30%, #0a0f14 70%, #05080a 100%);
  background-attachment: fixed;
  background-size: 50px 50px, 50px 50px, auto, auto, auto, auto, auto;
  position: relative;

  /* 添加3D透视效果 */
  perspective: 1000px;

  /* 全局科技感动画 */
  animation: globalPulse 8s ease-in-out infinite;
}

@keyframes globalPulse {
  0%, 100% {
    filter: brightness(1) contrast(1) saturate(1);
  }
  50% {
    filter: brightness(1.05) contrast(1.02) saturate(1.05);
  }
}

.home-content {
  height: 100%;
  padding: 50px 20px 20px 20px;
}

.home-content-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 超级粒子系统 */
.home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    /* 主粒子层 */
    radial-gradient(circle at 25% 25%, rgba(0, 100, 150, 0.12) 3px, transparent 3px),
    radial-gradient(circle at 75% 75%, rgba(0, 80, 120, 0.12) 3px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(0, 120, 160, 0.1) 2px, transparent 2px),
    /* 次粒子层 */
    radial-gradient(circle at 10% 80%, rgba(0, 90, 130, 0.08) 2px, transparent 2px),
    radial-gradient(circle at 90% 20%, rgba(0, 110, 140, 0.08) 2px, transparent 2px),
    radial-gradient(circle at 60% 90%, rgba(0, 70, 110, 0.06) 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 240px 240px, 160px 160px, 200px 200px, 300px 300px;
  animation: particleFloat 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.home::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    /* 数据流粒子 */
    radial-gradient(circle at 20% 30%, rgba(0, 100, 150, 0.15) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(0, 80, 120, 0.15) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(0, 120, 160, 0.12) 1px, transparent 1px);
  background-size: 80px 80px, 100px 100px, 120px 120px;
  animation: dataStream 15s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-15px) translateX(10px) rotate(90deg) scale(1.1);
  }
  50% {
    transform: translateY(-8px) translateX(-5px) rotate(180deg) scale(0.9);
  }
  75% {
    transform: translateY(12px) translateX(8px) rotate(270deg) scale(1.05);
  }
}

@keyframes dataStream {
  0% { transform: translateX(-100%) translateY(0%); }
  100% { transform: translateX(100vw) translateY(100vh); }
}

/* 移除光线扫过效果，改为静态微光 */
.home-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(135deg,
      transparent 40%,
      rgba(0, 100, 150, 0.02) 45%,
      rgba(0, 100, 150, 0.05) 50%,
      rgba(0, 100, 150, 0.02) 55%,
      transparent 60%
    );
  pointer-events: none;
  z-index: 2;
  opacity: 0.3;
}

.top-decoration {
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  display: flex;
  grid-template-columns: 320px 1fr 320px;
  grid-template-rows: 1fr;
  gap: 25px;
  padding: 25px;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.left-panel,
.center-panel,
.right-panel {
  flex: 4;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}
.left-panel{
  flex: 1;
}

.right-panel-content{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 15px;
  gap: 10px;
}
.right-top-panel{
  flex-shrink: 0;
  display: flex;
  flex: 3 0 0;
  gap: 15px;
  height: 50%;
}
.right-bottom-panel{
  flex-shrink: 0;
  display: flex;
  flex: 2 0 0;
  gap: 15px;
  height: 50%;
}

.bottom-chart-container {
  display: flex;
  gap: 15px;
  width: 100%;
  height: 100%;
}

.bottom-chart-item {
  flex: 1;
  /* min-height: 320px; */
  display: flex;
  flex-direction: column;
}

.right-top-panel-content{
  flex: 2;
}
.right-top-panel-content-map{
  flex: 2;
}
.right-top-panel-content-logs{
  flex: 1;
}
.right-bottom-panel-content{
  flex: 1;
}

.grid-item {
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.map-item {
  grid-column: 1 / span 2; /* 从第1列开始，跨越2列 */
  grid-row: 1 / span 2; /* 从第1行开始，跨越2行 */
}

.grid-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 100, 150, 0.3);
}



/* 超级炫酷面板样式 */
.panel-content {
  padding: 25px;
  height: 100%;
  background:
    /* 统一藏青蓝色玻璃态背景 */
    linear-gradient(145deg,
      rgba(0, 80, 120, 0.12) 0%,
      rgba(0, 100, 140, 0.08) 30%,
      rgba(0, 60, 100, 0.05) 70%,
      rgba(0, 90, 130, 0.08) 100%
    ),
    /* 内层渐变 */
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    /* 基础半透明黑色 */
    rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 100, 150, 0.4);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    /* 主阴影 */
    0 12px 40px rgba(0, 100, 150, 0.2),
    /* 内发光 */
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1),
    /* 外围光晕 */
    0 0 60px rgba(0, 100, 150, 0.15),
    0 0 120px rgba(0, 80, 120, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;

  /* 添加金属质感 */
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    linear-gradient(145deg, rgba(0, 0, 0, 0.1) 100%, transparent 50%);
}

.panel-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background:
    linear-gradient(90deg,
      rgba(0, 120, 160, 0.8) 0%,
      rgba(0, 100, 140, 0.6) 25%,
      rgba(0, 80, 120, 0.4) 50%,
      rgba(0, 90, 130, 0.6) 75%,
      rgba(0, 120, 160, 0.8) 100%
    );
  background-size: 400% 100%;
  animation: borderGlow 4s ease-in-out infinite;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 20px rgba(0, 100, 150, 0.3);
}

.panel-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.02) 50%, transparent 60%);
  animation: hologramShimmer 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: 16px;
}

.panel-content:hover {
  border-color: rgba(0, 100, 150, 0.6);
  box-shadow:
    0 20px 60px rgba(0, 100, 150, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 0 80px rgba(0, 100, 150, 0.25),
    0 0 160px rgba(0, 80, 120, 0.12);
  transform: translateY(-4px) rotateX(2deg) rotateY(-1deg);
}

@keyframes borderGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes hologramShimmer {
  0%, 100% { opacity: 0; transform: translateX(-100%) translateY(-100%); }
  50% { opacity: 0.8; transform: translateX(100%) translateY(100%); }
}

.panel-content h3 {
  width: 100%;
  text-align: left;
  background:
    linear-gradient(45deg,
      rgba(0, 120, 160, 0.9) 0%,
      rgba(0, 100, 140, 0.8) 30%,
      rgba(0, 80, 120, 0.7) 60%,
      rgba(0, 90, 130, 0.8) 90%,
      rgba(0, 120, 160, 0.9) 100%
    );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 800;
  text-shadow:
    0 0 10px rgba(0, 100, 150, 0.6),
    0 0 20px rgba(0, 80, 120, 0.4);
  position: relative;
  letter-spacing: 1px;
  animation: titleGlow 3s ease-in-out infinite;
  text-transform: uppercase;
}

@keyframes titleGlow {
  0%, 100% {
    background-position: 0% 50%;
    text-shadow:
      0 0 10px rgba(0, 100, 150, 0.6),
      0 0 20px rgba(0, 80, 120, 0.4);
  }
  50% {
    background-position: 100% 100%;
    text-shadow:
      0 0 15px rgba(0, 120, 160, 0.8),
      0 0 30px rgba(0, 100, 140, 0.6);
  }
}

.panel-content h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background:
    linear-gradient(90deg,
      rgba(0, 120, 160, 0.8) 0%,
      rgba(0, 100, 140, 0.6) 50%,
      rgba(0, 80, 120, 0.4) 100%
    );
  border-radius: 2px;
  box-shadow: 0 0 15px rgba(0, 100, 150, 0.4);
  animation: underlineGlow 2s ease-in-out infinite;
}

@keyframes underlineGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 100, 150, 0.4); }
  50% { box-shadow: 0 0 25px rgba(0, 120, 160, 0.6); }
}




/* 性能指标网格 */
.performance-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  gap: 20px;
}

.performance-item {
  text-align: center;
  padding: 20px;
  background:
    /* 统一藏青蓝色背景 */
    linear-gradient(135deg,
      rgba(0, 80, 120, 0.12) 0%,
      rgba(0, 100, 140, 0.1) 50%,
      rgba(0, 60, 100, 0.08) 100%
    ),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 70%),
    rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  border: 2px solid rgba(0, 100, 150, 0.4);
  backdrop-filter: blur(15px) saturate(1.3);
  box-shadow:
    0 8px 30px rgba(0, 100, 150, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1),
    0 0 40px rgba(0, 100, 150, 0.15);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.performance-item:hover {
  transform: translateY(-4px) scale(1.08) rotateX(5deg);
  border-color: rgba(0, 100, 150, 0.6);
  box-shadow:
    0 15px 50px rgba(0, 100, 150, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 0 60px rgba(0, 100, 150, 0.25),
    0 0 120px rgba(0, 80, 120, 0.12);
}

.performance-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(0, 100, 150, 0.08), transparent);
  animation: performanceGlow 3s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.performance-item:hover::before {
  opacity: 1;
}

@keyframes performanceGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.performance-label {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background:
    linear-gradient(45deg,
      rgba(0, 120, 160, 0.8) 0%,
      rgba(0, 100, 140, 0.7) 30%,
      rgba(0, 80, 120, 0.6) 60%,
      rgba(0, 90, 130, 0.7) 90%,
      rgba(0, 120, 160, 0.8) 100%
    );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow:
    0 0 10px rgba(0, 100, 150, 0.4),
    0 0 20px rgba(0, 80, 120, 0.3);
  animation: labelGlow 3s ease-in-out infinite;
}

@keyframes labelGlow {
  0%, 100% {
    background-position: 0% 50%;
    text-shadow:
      0 0 10px rgba(0, 100, 150, 0.4),
      0 0 20px rgba(0, 80, 120, 0.3);
  }
  50% {
    background-position: 100% 100%;
    text-shadow:
      0 0 15px rgba(0, 120, 160, 0.6),
      0 0 30px rgba(0, 100, 140, 0.4);
  }
}

.bottom-decoration {
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 280px 1fr 280px;
    padding: 20px;
    gap: 20px;
  }

  .center-panel {
    min-height: 550px;
  }

  .center-grid {
    min-height: 550px;
    gap: 15px;
  }

  .grid-item {
    min-height: 250px;
  }

  .map-item {
    min-height: 280px;
  }

  .home::before {
    background-size: 120px 120px, 180px 180px, 240px 240px;
  }
}

@media (max-width: 992px) {
  .main-content {
    grid-template-columns: 240px 1fr 240px;
    padding: 15px;
    gap: 15px;
  }


  .home::before {
    background-size: 80px 80px, 120px 120px, 160px 160px;
  }
}

@media (max-width: 768px) {
  .home {
    height: auto;
    min-height: 100vh;
  }

  .main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
  }

  .center-panel {
    min-height: 800px; /* 移动端需要更多高度 */
  }

  .center-grid {
    grid-template-columns: 1fr; /* 移动端改为单列 */
    grid-template-rows: auto auto auto;
    min-height: 800px;
    gap: 15px;
  }

  .grid-item {
    min-height: 200px;
  }

  .map-item {
    grid-column: 1; /* 移动端单列布局 */
    grid-row: 1; /* 地图在第一行 */
    min-height: 300px;
  }

  .heatmap-item {
    grid-row: 2; /* 热力图在第二行 */
  }

  .growth-item {
    grid-row: 3; /* 增长趋势图在第三行 */
  }

  .left-panel,
  .right-panel {
    flex-direction: row;
    gap: 15px;
  }

  .left-panel > *,
  .right-panel > * {
    flex: 1;
  }

  .map-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .map-controls {
    justify-content: center;
  }

  .performance-grid {
    flex-direction: column;
    gap: 25px;
  }

  .home::before {
    background-size: 60px 60px, 90px 90px, 120px 120px;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 10px;
  }

  .left-panel,
  .right-panel {
    flex-direction: column;
  }

  .panel-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }

  .stat-value {
    font-size: 24px;
  }

  .map-header h3 {
    font-size: 14px;
  }

  .control-btn {
    padding: 6px 10px;
    font-size: 11px;
  }

  .home::before {
    background-size: 40px 40px, 60px 60px, 80px 80px;
  }
}

/* 浮动导航按钮样式 */
.floating-nav {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

/* 浮动注销按钮样式 */
.floating-logout {
  position: fixed;
  top: 35px;
  right: 25px;
  z-index: 1000;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background:
    linear-gradient(145deg,
      rgba(0, 80, 120, 0.9) 0%,
      rgba(0, 100, 140, 0.8) 50%,
      rgba(0, 60, 100, 0.7) 100%
    ),
    rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(0, 100, 150, 0.6);
  border-radius: 12px;
  color: #00ffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow:
    0 8px 25px rgba(0, 100, 150, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-btn:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(0, 100, 150, 0.8);
  box-shadow:
    0 12px 35px rgba(0, 100, 150, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 100, 150, 0.3);
}

.nav-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}

.nav-text {
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background:
    linear-gradient(145deg,
      rgba(220, 20, 60, 0.9) 0%,
      rgba(139, 0, 0, 0.8) 50%,
      rgba(178, 34, 52, 0.7) 100%
    ),
    rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(220, 20, 60, 0.6);
  border-radius: 12px;
  color: #ffcccc;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow:
    0 8px 25px rgba(220, 20, 60, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logout-btn:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(220, 20, 60, 0.8);
  box-shadow:
    0 12px 35px rgba(220, 20, 60, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 0 30px rgba(220, 20, 60, 0.3);
}

.logout-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 5px rgba(255, 204, 204, 0.5));
}

.logout-text {
  text-shadow: 0 0 8px rgba(255, 204, 204, 0.4);
}

@media (max-width: 768px) {
  .floating-nav {
    top: 15px;
    right: 15px;
  }

  .floating-logout {
    top: 15px;
    right: 15px;
  }

  .nav-btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  .logout-btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  .nav-text {
    display: none; /* 移动端只显示图标 */
  }

  .logout-text {
    display: none; /* 移动端只显示图标 */
  }
}
</style>
